@extends('layout.admin.master')
@section('content')
    <div class="card mt-4">
        <div class="card-body">
            <div class="header-body mt--5 mt-md--6">
                <div class="row align-items-center">
                    <div class="col">
                        <!-- Nav -->
                        <ul class="nav nav-tabs nav-overflow header-tabs">
                            <li class="nav-item">
                                <a href="{{route('wechat.wxReply.index')}}" class="nav-link ">
                                    文本消息列表
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{route('wechat.wxbutton.create')}}" class="nav-link active">
                                    添加文本消息
                                </a>
                            </li>

                        </ul>

                    </div>
                </div>
            </div>
        </div>
        <form action="{{route('wechat.wxReply.update',$wxReply)}}" method="post">
            @csrf @method("PUT")
            {!! $model !!}
            <div class="card-body" id="content">
                <div class="card">
                    <div class="card-header">
                        回复内容
                        <label for=""><button type="button" class="btn btn-outline-info btn-sm ml-3 " @click="addContent()">添加回复内容</button></label>
                    </div>
                    <div class="card-body">
                        <div class="row" v-for="(v,k) in content">
                            <textarea id="" cols="30" rows="3" class="col-12 mt-3 mb-3" v-model="v.content"></textarea>
                            <a @click="emoticon()" href="javascript:;" class="btn btn-outline-info ml-3 btn-sm" >添加表情</a>
                            <a @click="delContent(k)" href="javascript:;" class="btn btn-outline-info btn-sm" >删除</a>

                        </div>
                    </div>
                    <div class="card-footer text-muted">
                        <button type="submit" class="btn btn-info">提交数据</button>
                    </div>
                </div>
            </div>
            <textarea name="content" id="" cols="30" rows="10">@{{content}}</textarea>
        </form>
    </div>
@endsection
@push('js')
    <script>
        require(['hdjs','vue','jquery'],function (hdjs,Vue,$) {
            new Vue({
                el:'#content',
                data:{
                    content:{!! $wxReply->wxReply->content !!},
                },
                mounted(){
                    // alert(11);
                    this.emotion();
                },
                update(){
                    this.emotion();
                },
                methods:{
                    emotion() {
                        var This = this;
                        $.each($('#content textarea'), function () {
                            hdjs.emotion({
                                //点击的元素，可以为任何元素触发
                                btn: $(this).next('a'),
                                //选中图标后填入的文本框
                                input: $(this),
                                //选择图标后执行的回调函数
                                callback: function (con, btn, input) {
                                    //首先需要获取当前插入图标的文本框的编号
                                    var index = $(input).index('#content textarea');
                                    This.content[index].content = $(input).val();
                                }
                            });
                        })
                    },
                    addContent(){
                        var item={content:''};
                        this.content.push(item);
                    },
                    delContent(k){
                        this.content.splice(k,1);
                    }
                },
            });
        });
    </script>
@endpush